<template>
  <div class="box pagestyle">
    <div class="mineinfo">
      <div class="title">矿井信息</div>
      <el-form :model="form" label-width="auto" label-position="top">
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="6">
            <el-form-item label="煤矿编码">
              <!-- <div class="item_title">煤矿编码</div> -->
              <el-input v-model="form.mineCode" style="width: 284px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="煤矿全称">
              <el-input v-model="form.mineFullName" style="width: 284px" placeholder="请输入"
                @change="setMineAbbreviation" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="煤矿简称">
              <el-input v-model="form.mineAbbreviation" :disabled='!form.mineFullName' style="width: 284px"
                placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="经济类型">
              <el-select v-model="form.economyType" @blur="selectBlur" clearable filterable placeholder="请选择"
                style="width: 284px">
                <el-option v-for="item in economyTypeArr" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="6">
            <el-form-item label="省/市/区">
              <el-cascader :options="dataCitys" style="width: 284px" @change="onChange" clearable v-model="address" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="详细地址">
              <el-input min="0" v-model="form.detailAddress" style="width: 284px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安全生产起始日">
              <el-date-picker style="width: 284px" v-model="form.productStartTime" type="datetime" placeholder="请选择"
                format="YYYY-MM-DD hh:mm:ss" value-format="YYYY-MM-DD hh:mm:ss" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="核定生产能力（万吨）">
              <el-input min="0" v-model="form.productAbility" style="width: 284px" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="6">
            <el-form-item label="核定下井人数（人）">
              <el-input v-model="form.mineNumber" style="width: 284px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="主井口坐标">
              <el-input v-model="form.mainWellheadLocation" style="width: 284px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="副井口坐标">
              <el-input v-model="form.deputyWellheadLocation" style="width: 284px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="井田面积（平方千米）">
              <el-input v-model="form.mineFieldArea" style="width: 284px" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="6">
            <el-form-item label="井田区域坐标">
              <el-input v-model="form.mineFieldRegionLocation" style="width: 284px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="可采煤层">
              <el-input v-model="form.mineableCoalSeam" style="width: 284px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="采矿许可证编号">
              <el-input v-model="form.mineLicenseNumber" style="width: 284px" placeholder="请输入" @blur="checkCMine" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安全生产许可证编号">
              <el-input v-model="form.safetyProductLicenseNumber" style="width: 284px" placeholder="请输入"
                @blur="checkMineCode" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="6">
            <el-form-item label="工商执照编号">
              <el-input v-model="form.businessLicenseNumber" style="width: 284px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="矿井瓦斯等级">
              <el-select v-model="form.gasLevel" @blur="selectBlur3" clearable filterable placeholder="请选择"
                style="width: 284px">
                <el-option v-for="item in gasLevelArr" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="绝对瓦斯涌出量（立方米/分钟）">
              <el-input min="0" v-model="form.absoluteGasEmission" style="width: 284px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="相对瓦斯涌出量（立方米/吨）">
              <el-input v-model="form.relativeGasEmission" style="width: 284px" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="6">
            <el-form-item label="是否冲击地压矿井">
              <el-radio-group v-model="form.impactMine" style="width: 284px">
                <el-radio :label="true" size="large">是</el-radio>
                <el-radio :label="false" size="large">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="矿长">
              <el-select v-model="form.mineManager" @blur="selectBlur2" clearable filterable placeholder="请选择"
                style="width: 284px">
                <el-option v-for="item in mineManagerArr" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="矿长安全生产许可资格证编号">
              <el-input v-model="form.managerProductLicenseNumber" style="width: 284px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="矿长资格证编号">
              <el-input v-model="form.managerLicenseNumber" style="width: 284px" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="6">
            <el-form-item>
              <div class="item_title" style="width:100%;display:flex;justify-content:space-between;">
                工作班次数量
                <div style="font-size:14px;color:#409eff;cursor: pointer;" @click="goBanci">设置班次</div>
              </div>
              <el-input v-model="form.workClassNumber " disabled style="width: 284px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
            <el-form-item label="应急联系人">
              <el-input v-model="form.emergencyContact" style="width: 284px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="应急联系人电话">
              <el-input v-model="form.emergencyContactNumber" style="width: 284px" placeholder="请输入"
                @blur="checkPhoneNum" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安标编号">
              <el-input v-model="form.safetyLabelNumber" style="width: 284px" placeholder="请输入"
                @change="setMineAbbreviation" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="上传背景">
              <el-upload v-if="!fileObj.name" v-model:file-list="fileList" :show-file-list="false"
                :action="baseurl + '/common/upload'" :headers="{ Authorization: getToken() }" :on-remove="handleRemove"
                :on-success="onsuccess" :before-upload="beforeUPload">
                <div style="width: 284px">
                  <svg-icon icon-class="shangchuan" />
                </div>
              </el-upload>
              <div class="fileList" v-if="fileObj.name">
                <div class="name" :title="fileObj.name">
                  <img src="@/assets/images/例图.svg" alt="" style="vertical-align: middle;">
                  {{fileObj.name}}
                </div>
                <div class="caozuo">
                  <el-progress v-if="progress != 100" type="circle" :show-text="false" :percentage="progress" />
                  <div v-if="progress = 100" @click="handlePreview">查看</div>
                  <svg-icon v-if="progress = 100" @click="downloadImg" icon-class="xiazai"/>
                  <svg-icon v-if="progress = 100" @click="deleteImg" style="fill:rgba(227, 60, 100, 1);"
                    icon-class="mianxingshanchu" />
                </div>
              </div>
              <el-dialog v-model="dialogVisible" style="heigth:800px;">
                <img w-full :src="form.backgroundUrl" alt="Preview Image" />
              </el-dialog>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="上传应急预案">
              <el-upload v-if="!fileObj2.name" v-model:file-list="fileList" :show-file-list="false"
                :action="baseurl + '/common/upload'"
                :headers="{ Authorization: getToken(),'Content-Disposition':'inline' }" :on-success="onsuccess2"
                :before-upload="beforeUPload2">
                <div style="width: 284px;padding: 8px 0;">
                  <svg-icon icon-class="shangchuan" />
                </div>
              </el-upload>
              <div class="fileList" v-if="fileObj2.name">
                <div class="name" :title="fileObj2.name">
                  {{fileObj2.name}}
                </div>
                <div class="caozuo">
                  <el-progress v-if="progress2 != 100" type="circle" :show-text="false" :percentage="progress2" />
                  <div v-if="progress2 = 100" @click="handlePreview2">查看</div>
                  <svg-icon v-if="progress2 = 100" @click="downloadFile" icon-class="xiazai"/>
                  <svg-icon v-if="progress2 = 100" @click="deleteFile" style="fill:rgba(227, 60, 100, 1);"
                    icon-class="mianxingshanchu" />
                </div>
              </div>
              <el-dialog v-model="dialogVisible2" style="height:800px;">
                <iframe :src="form.emergencyPlanUrl" frameborder="0" v-if="fileObj2.name.includes('pdf')"
                  style="width:100%;height:700px"></iframe>
                <vue-office-docx v-if="fileObj2.name.includes('doc')" :src="form.emergencyPlanUrl"
                  style="height:700px" />
              </el-dialog>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="上传深色logo">
              <el-upload v-if="!fileObj3.name" v-model:file-list="fileList" :show-file-list="false"
                :action="baseurl + '/common/upload'"
                :headers="{ Authorization: getToken(),'Content-Disposition':'inline' }" :on-success="onsuccess3"
                :before-upload="beforeUPload3">
                <div style="width: 284px">
                  <svg-icon icon-class="shangchuan" />
                </div>
              </el-upload>
              <div class="fileList" v-if="fileObj3.name">
                <div class="name" :title="fileObj3.name">
                  {{fileObj3.name}}
                </div>
                <div class="caozuo">
                  <el-progress v-if="progress3 != 100" type="circle" :show-text="false" :percentage="progress3" />
                  <div v-if="progress3 = 100" @click="handlePreview3">查看</div>
                  <svg-icon v-if="progress3 = 100" @click="downloadImg3" icon-class="xiazai"/>
                  <svg-icon v-if="progress3 = 100" @click="deleteImg3" style="fill:rgba(227, 60, 100, 1);"
                    icon-class="mianxingshanchu" />
                </div>
              </div>
              <el-dialog v-model="dialogVisible3" style="height:800px;">
                <img w-full :src="form.logoUrl" alt="Preview Image" />
              </el-dialog>


            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">上传浅色logo</div>
                <el-upload
                  v-if="!fileObj4.name"
                  v-model:file-list="fileList"
                  :show-file-list="false"
                  :action="baseurl + '/common/upload'"
                  :headers="{ Authorization: getToken(),'Content-Disposition':'inline' }"
                  :on-success="onsuccess4"
                  :before-upload="beforeUPload4"
                >
                  <div style="width: 284px">
                    <svg-icon icon-class="shangchuan" />
                  </div>
                </el-upload>
                <div class="fileList" v-if="fileObj4.name">
                  <div class="name" :title="fileObj4.name">
                    {{fileObj4.name}}
                  </div>
                  <div class="caozuo">
                    <el-progress  v-if="progress4 != 100" type="circle" :show-text="false" :percentage="progress4" /> 
                    <div v-if="progress4 = 100" @click="handlePreview4">查看</div>
                  </div>
                </div>
                <el-dialog v-model="dialogVisible4" style="height:800px;">
                  <img w-full :src="form.lightLogoUrlogoUrl" alt="Preview Image"/>
                </el-dialog>

                
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <div class="btns" v-if="userStore.modify">
        <!-- <el-button @click="getMineInfo">取消</el-button> -->
        <el-button type="primary" style="background-color:#409eff;border:1px solid #409eff;" @click="saveMineInfo">确定
        </el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
  //引入VueOfficeDocx组件
  import VueOfficeDocx from '@vue-office/docx'
  //引入相关样式
  import '@vue-office/docx/lib/index.css'
  import axios from "@/utils/request"
  import {
    getToken
  } from '@/utils/auth'
  import {
    dataCitys
  } from '@/utils/citys'
  import {
    ElMessage
  } from "element-plus";
  import {
    useRouter
  } from "vue-router";
  import usePagesStore from '@/store/modules/pages'
  import useUserStore from "@/store/modules/user";
  import {
    fileupload
  } from '@/api/config'
  const userStore = useUserStore();

  const router = useRouter();
  const pagesStore = usePagesStore()

  let baseurl =
    import.meta.env.VITE_APP_BASE_API;
  // 图片上传
  const dialogImageUrl = ref('')
  const dialogVisible = ref(false)
  const fileObj = ref({})
  const progress = ref(0)
  let timer = null
  const beforeUPload = () => {
    progress.value = 0
    timer = setInterval(() => {
      if (progress.value <= 99) {
        progress.value += 5
      }
    }, 1000);
  }
  const onsuccess = (res, fileList) => {
    setTimeout(() => {
      clearInterval(timer)
      progress.value = 100
    }, 5000)
    console.log(res, fileList);
    form.value.backgroundUrl = res.url
    fileObj.value = fileList
  }
  const handlePreview = () => {
    // dialogImageUrl.value = fileObj.value.response.url
    dialogVisible.value = true
  }
  // 下载图片
  const downloadImg = () => {
    fetch(fileObj.value.response.fileName).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
      const a = document.createElement('a')
      a.href = URL.createObjectURL(blob)
      console.log(a.href)
      a.download = fileObj.value.name // 下载文件的名字
      document.body.appendChild(a)
      a.click()
    })
  }
  // 删除图片
  const deleteImg = () => {
    fileObj.value = {}
    form.value.backgroundUrl = ''
  }

  const dialogUrl = ref('')
  const dialogVisible2 = ref(false)
  const fileObj2 = ref({})
  const progress2 = ref(0)
  let timer2 = null
  const beforeUPload2 = () => {
    progress2.value = 0
    timer2 = setInterval(() => {
      if (progress2.value <= 99) {
        progress2.value += 5
      }
    }, 1000);
  }
  const onsuccess2 = (res, fileList) => {
    setTimeout(() => {
      clearInterval(timer2)
      progress2.value = 100
    }, 5000)
    console.log(res, fileList);
    form.value.emergencyPlanUrl = res.url
    fileObj2.value = fileList
  }
  const handlePreview2 = (uploadFile) => {
    // dialogUrl.value = fileObj2.value.response.url
    dialogVisible2.value = true
  }
  // 下载文档
  const downloadFile = () => {
    fetch(fileObj2.value.response.fileName).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
      const a = document.createElement('a')
      a.href = URL.createObjectURL(blob)
      console.log(a.href)
      a.download = fileObj2.value.name // 下载文件的名字
      document.body.appendChild(a)
      a.click()
    })
  }
  // 删除文档
  const deleteFile = () => {
    fileObj2.value = {}
    form.value.emergencyPlanUrl = ''
  }

  // 图片上传
  const dialogImageUrl3 = ref('')
  const dialogVisible3 = ref(false)
  const fileObj3 = ref({})
  const progress3 = ref(0)
  let timer3 = null
  const beforeUPload3 = () => {
    progress3.value = 0
    timer3 = setInterval(() => {
      if (progress3.value <= 99) {
        progress3.value += 5
      }
    }, 1000);
  }
  const onsuccess3 = (res, fileList) => {
    setTimeout(() => {
      clearInterval(timer3)
      progress3.value = 100
    }, 5000)
    console.log(res, fileList);
    form.value.logoUrl = res.url
    fileObj3.value = fileList
  }
  const handlePreview3 = () => {
    // dialogImageUrl3.value = fileObj3.value.response.url
    dialogVisible3.value = true
  }
  // 下载图片
  const downloadImg3 = () => {
    fetch(fileObj3.value.response.fileName).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
      const a = document.createElement('a')
      a.href = URL.createObjectURL(blob)
      a.download = fileObj3.value.name // 下载文件的名字
      document.body.appendChild(a)
      a.click()
    })
  }
  // 删除图片
  const deleteImg3 = () => {
    fileObj3.value = {}
    form.value.logoUrl = ''
  }

  // 图片上传
  const dialogImageUrl4 = ref('')
  const dialogVisible4 = ref(false)
  const fileObj4 = ref({})
  const progress4 = ref(0)
  let timer4 = null
  const beforeUPload4 = () => {
    progress4.value = 0
    timer3 = setInterval(() => {
      if (progress4.value <= 99) {
        progress4.value += 5
      }
    }, 1000);
  }
  const onsuccess4 = (res, fileList) => {
    setTimeout(() => {
      clearInterval(timer3)
      progress4.value = 100
    }, 5000)
    console.log(res, fileList);
    form.value.lightLogoUrl = res.url
    fileObj4.value = fileList
  }
  const handlePreview4 = () => {
    // dialogImageUrl3.value = fileObj3.value.response.url
    dialogVisible3.value = true
  }
  // 下载图片
  const downloadImg4 = () => {
    fetch(fileObj4.value.response.fileName).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
      const a = document.createElement('a')
      a.href = URL.createObjectURL(blob)
      a.download = fileObj4.value.name // 下载文件的名字
      document.body.appendChild(a)
      a.click()
    })
  }
  // 删除图片
  const deleteImg4 = () => {
    fileObj4.value = {}
    form.value.lightLogo = ''
  }


  const form = ref({})
  const economyTypeArr = ref([{
    label: '有限责任公司',
    value: '有限责任公司'
  }])
  const mineManagerArr = ref([])
  const gasLevelArr = ref([{
      label: '低瓦斯矿井',
      value: '低瓦斯矿井'
    },
    {
      label: '高瓦斯矿井',
      value: '高瓦斯矿井'
    },
    {
      label: '瓦斯突出矿井',
      value: '瓦斯突出矿井'
    }
  ])
  const address = ref([])


  // 经济类型可输入的下拉
  const selectBlur = e => {
    if (e.target.value !== '') {
      form.value.economyType = e.target.value;
    }
  };
  // 矿长可输入的下拉
  const selectBlur2 = e => {
    if (e.target.value !== '') {
      form.value.mineManager = e.target.value;
    }
  };
  // 瓦斯等级可输入的下拉
  const selectBlur3 = e => {
    if (e.target.value !== '') {
      form.value.gasLevel = e.target.value;
    }
  };

  // 省市区选择时执行
  const onChange = (val) => {
    if (val) {
      form.value.address = val.join('-')
    }
  }
  // 自动填写煤矿简称
  const setMineAbbreviation = () => {
    form.value.mineAbbreviation = form.value.mineFullName
  }
  // 跳转班次信息页面
  const goBanci = () => {
    router.push({
      name: "Config_shiftInfo",
    });
  }

  // 获取矿井信息
  const getMineInfo = () => {
    axios.post('/mine/info/search').then(res => {
      console.log(res);
      form.value = res.data
      if (form.value.address) {
        address.value = form.value.address.split('-')
      }
      form.value.workClassNumber = ''
      getCountAll()
      progress.value = 100
      progress2.value = 100
      progress3.value = 100
      fileObj.value.name = res.data.backgroundUrlName
      fileObj2.value.name = res.data.emergencyPlanUrlName
      fileObj3.value.name = res.data.logoUrlName
      fileObj.value.response = {}
      fileObj2.value.response = {}
      fileObj3.value.response = {}
      fileObj.value.response.fileName = res.data.backgroundUrl
      fileObj2.value.response.fileName = res.data.emergencyPlanUrl
      fileObj3.value.response.fileName = res.data.logoUrl
      pagesStore.logoUrl = res.data.logoUrl
      pagesStore.safetyNum = res.data.safetyLabelNumber
    })
  }

  getMineInfo()
  // 获取班次
  const getCountAll = () => {
    axios.post('/class/info/countAll').then(res => {
      console.log(res.data);
      form.value.workClassNumber = res.data.classNum
    })
  }

  // 保存矿井信息
  const saveMineInfo = () => {
    axios.post('/mine/info/add', form.value).then(res => {
      if (res.code == 200) {
        ElMessage.success('操作成功')
        getMineInfo()
      }
    })
  }


  // 手机号校验
  const checkPhoneNum = () => {
    let isPhoneNumberValid = false
    const regex = /^1[3456789]\d{9}$/; // 手机号正则表达式
    isPhoneNumberValid = regex.test(form.value.emergencyContactNumber)
    if (isPhoneNumberValid) {

    } else {
      ElMessage.error('手机号码格式不正确')
    }
  }
  // 校验煤矿安全生产许可证编号  （川）MK安许证字〔2021〕5116021971A
  const checkMineCode = () => {
    const regex = /^（[京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新台港澳]）MK安许证字〔\d{4}〕\d{10}[A-B]$/; // 正则表达式匹配格式
    if (!regex.test(form.value.safetyProductLicenseNumber)) {
      ElMessage.error('请输入有效的煤矿安全生产许可证编号');
    }
  }
  // 校验采矿许可证编号 C5118002010127120096737
  const checkCMine = () => {
    const regex = /^C\d{6}\d{6}[12345678]{1}[123]{1}[123456]{1}\d{7}$/; // 正则表达式匹配格式
    if (!regex.test(form.value.mineLicenseNumber)) {
      ElMessage.error('请输入有效的采矿许可证编号');
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-progress-circle {
    width: 20px !important;
    height: 20px !important;
  }

  .fileList {
    width: 284px;
    height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .name {
      width: 118px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .caozuo {
      width: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      div {
        cursor: pointer;
        font-size: 12px;
        color: rgba(64, 158, 255, 1);
      }

      img {
        cursor: pointer;
      }
    }
  }

  .el-form-item {
    width: 284px;
    margin: 0;
  }

  .box {
    padding: 12px;

    // background: #fff;
    ::v-deep .el-form-item--default .el-form-item__content {
      line-height: normal;
    }

    .mineinfo {
      padding: 0 16px;
      height: 100%;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 8px;

      .title {
        padding: 20px 0px;
        height: 56px;
        font-size: 16px;
        font-weight: 700;
        color: #3e464f;
      }

      .item_title {
        margin: 0 0 12px 0;
        color: rgba(62, 70, 79, 0.8);
        font-size: 14px;
        font-weight: 400;
      }

      .btns {
        position: absolute;
        right: 20px;
        bottom: 20px;
      }

      .url {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
</style>